<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  <style>
    *{margin:0px;padding:0px;}
	body{font-family:"微软雅黑";font-size:14px;}
	img{border:0;}
	#box{width:560px;margin:50px auto;}
	#box .items{float:left;width:100%}
	#box .items .header{height:35px;line-height:35px;background:#39f;border-bottom:1px solid #000;}
	#box .items .header p{padding-left:5px;color:#fff;}
	#box .items .content{display:none;width:560px;height:290px;}
	#box .items .header:hover{background:#3399cc;}
	#box .items:first-child .content{display:block;}
  </style>
 </head>
 <body>
   <div id="box">
	  <!--卡片-->
	  <div class="items">
		 <div class="header"><p>选项卡1</p></div>
		 <div class="content">
			 <img src="images/1.jpg" width="560" height="290" alt="#">
		 </div>
	  </div>
	  <!--卡片-->
	  <div class="items">
		 <div class="header"><p>选项卡2</p></div>
		 <div class="content">
			 <img src="images/3.jpg" width="560" height="290" alt="#">
		 </div>
	  </div>
	  <!--卡片-->
	  <div class="items">
		 <div class="header"><p>选项卡3</p></div>
		 <div class="content">
			 <img src="images/2.gif" width="560" height="290" alt="#">
		 </div>
	  </div>
   </div>

   <script type="text/javascript">
		// //banner,折叠，选项卡，tree	
		$(function(){
			$("#box").find(".header").click(function(){
				//获取当前元素的内容
				var $next = $(this).next();
				//获取当前元素的父容器
				var $parent = $(this).parent();
				//获取当前父元素的同辈元素
				var $sibs = $parent.siblings();
				//将同辈元素里面的内容隐藏
				$sibs.find(".content").hide();
				//当前元素的内容显示
				$next.show();
			});
		});	
   </script>
 </body>
</html>
